<template>
  <div>
    <el-button @click="changeZh">中文</el-button>
    <el-button @click="changeEn">English</el-button>
    <p>{{ translate('sayHi') }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      locale: 'zh',
      message: {
        zh: {
          sayHi: '你好呀'
        },
        en: {
          sayHi: 'Hello!'
        }
      }
    }
  },
  methods: {
    translate(str) {
      return this.message[this.locale][str]
    },
    changeZh() {
      this.locale = 'zh'
    },
    changeEn() {
      this.locale = 'en'
    }
  }
}
</script>

<style>

</style>
